<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>过滤器</title>
    <script type="text/javascript" src="./js/vue.js"></script>
    <script src="./js/dayjs.min.js"></script>
    <style>
        body {
            padding: 10px;
        }

        input {
            margin: 5px;
        }
    </style>
</head>
<div id="root">
    <h2>{{name}}</h2>
    <hr>
    <!--计算属性实现-->
    显示时间:{{fmtTime}}
    <hr>
    <!--过滤器实现-->
    显示时间:{{time | timeFormater}}
    <br>
    显示时间:{{time | timeFormater('YYYY年MM月DD日')}}
    <br>
    显示时间:{{time | timeFormater('YYYY年MM月DD日') | mySlice}}
</div>
<div id="root1">
    <h3>{{msg | mySlice}}</h3>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;
    // 全局过滤器
    Vue.filter('mySlice',function(val){
        return val.slice(0,4);
    });
    const vm = new Vue({
        el: '#root',
        data: {
            name: '培立优',
            time: 1696490760633,
        },
        //#region 
        computed: {
            fmtTime() {
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        //#endregion
        //#region watch实现过滤
        // watch: {
        //     keyWord: {
        //         immediate: true,
        //         handler(nVal, oVal) {
        //             console.log(nVal);
        //             this.filterPersons = this.persons.filter((p) => {
        //                 return -1 !== p.name.indexOf(nVal);
        //             });
        //         },
        //     }
        // },
        //#endregion
        methods: {
            registry() {
                console.log(JSON.stringify(this.userInfo));
            }
        },
        //#region 局部过滤器
        filters: {
            timeFormater(val, fmt = 'YYYY-MM-DD HH:mm:ss') {
                return dayjs(val).format(fmt)
            },
            // mySlice(val) {
            //     return val.slice(0, 4)
            // }
        },
        //#endregion

    });
    const vm1 = new Vue({
        el: '#root1',
        data: {
            msg: '你好,培立优',
        },
    });
</script>

</html>